<template>
  <el-dialog
    title="修改部门"
    :modelValue="modelValue"
    align-center
    width="936px"
    class="public-dialog"
    @close="handleClose"
    :close-on-click-modal="false"
  >
    <div class="flex flex-wrap my-[16px]">
      <div
        class="text-[14px] text-[#333] leading-[20px] mr-[32px]"
        v-for="item in headInfo"
        :key="item.label"
      >
        <span>{{ item.label }}：</span>
        <span>{{ getLabel(data?.[item.field]) }}</span>
      </div>
    </div>
    <VCascader
      v-model="depValue"
      type="1"
      :multiple="false"
      :showAlllevels="true"
      class="w-[450px] mb-[16px]"
      placeholder="修改部门"
      @change="handleChange"
    />
    <vxe-grid ref="tableRef" v-bind="tableOptions" />
    <template #footer>
      <div class="dialog-button">
        <el-button @click="handleClose(false)" :disabled="loading">
          关闭
        </el-button>
        <el-button type="primary" :loading="loading" @click="handleSave">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="jsx">
import { billUpdateDepartment } from "../../api";
import { ElMessage } from "element-plus";

const props = defineProps({
  modelValue: { type: Boolean, default: true },
  data: { type: Object, default: () => {} },
});

const headInfo = [
  { label: "入仓时间", field: "entry_warehouse_time" },
  { label: "渠道", field: "channel_name" },
  { label: "物流单号", field: "tracking_number" },
  { label: "备库单号", field: "initial_backup_order_number" },
];

const emit = defineEmits(["update:modelValue", "close", "refresh"]);

const tableRef = ref();

watch(
  () => props.data,
  (val) => {
    nextTick(() => {
      if (!val || !props.modelValue) return;
      tableOptions.data = val?.surcharge || [];
    });
  },
  { immediate: true, deep: true }
);

const isArray = (val) =>
  Object.prototype.toString.call(val) === "[object Array]";

const getLabel = (e) => {
  if (isArray(e)) {
    return e.join(",");
  }
  return e;
};
const department_id = ref(null);
const handleChange = (value) => {
  department_id.value = value.value;
};
const tableOptions = reactive({
  round: true,
  height: "400",
  columnConfig: {
    resizable: true,
  },
  columns: [
    { width: 50, type: "checkbox" },
    { title: "费用名称", minWidth: 100, field: "cost_label" },
    { title: "币种", width: 120, field: "bill_currency" },
    { title: "金额", width: 120, field: "cost_value" },
    { title: "CNY金额", width: 120, field: "cost_value_cny" },
    {
      title: "部门",
      minWidth: 120,
      field: "department_info.department_full_name",
    },
  ],
  data: [],
});
const loading = ref(false);
const handleSave = async () => {
  try {
    const checkedData = tableRef.value.getCheckboxRecords();
    if (!checkedData?.length) ElMessage.warning("请至少选择一条数据!");
    let finance_initial_bills_surcharge_id = checkedData?.map(
      (item) => item.finance_initial_bills_surcharge_id
    );
    let finance_initial_bills_detail_id =
      props?.data?.finance_initial_bills_detail_id;
    if (!department_id.value) ElMessage.warning("请选择部门!");
    loading.value = true;
    let obj = {
      finance_initial_bills_surcharge_id,
      finance_initial_bills_detail_id,
      department_id: department_id.value,
    };
    const { code, message } = await billUpdateDepartment({
      ...obj,
    });
    if (code !== 200) {
      ElMessage.warning(message);
      return;
    }
    ElMessage.success("修改成功");
    handleClose(true);
  } catch (e) {
    if (e.toString().includes(false)) {
      ElMessage.warning("请检查表单信息");
    }
    console.error(e);
  } finally {
    loading.value = false;
  }
};
const depValue = ref(null);
const handleClose = (refresh) => {
  department_id.value = null;
  depValue.value = null;
  tableOptions.data = [];
  tableRef.value.clearCheckboxRow();
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
</script>
